<template>
  <div class="comments_wrap">
    <div class="comments">
      <div class="good_comments_wrap clearfix">
        <h3>{{title}}<span v-if="commentCount">({{ commentCount }})</span></h3>
        <div class="itm flex" v-for="item in data" :key="item.commentId">
          <div class="head">
            <a href="/user/home?id=39830029"
              ><img :src="item.user.avatarUrl"
            /></a>
          </div>
          <div class="cntwrap">
            <div class="">
              <div class="cnt f-brk">
                <a href="/user/home?id=39830029" class="s-fc7">{{
                  item.user.nickname
                }}</a>
                <img
                  data-v-7b68d762=""
                  width="13"
                  height="13"
                  v-if="item.user.avatarDetail != null"
                  :src="item.user.avatarDetail.identityIconUrl"
                  style="margin-right: 5px; vertical-align: -2px"
                /><img
                  class="vip_img brand-tag brand-vip"
                  v-if="item.user.vipRights"
                  :src="vipImg[item.user.vipRights.redVipLevel - 1]"
                />：{{ item.content }}
              </div>
            </div>
            <div
              class="que f-brk f-pr s-fc3"
              v-if="item.beReplied.length !== 0"
            >
              <span class="darr">
                <i class="bd">◆</i>
                <i class="bg">◆</i>
              </span>
              <a class="s-fc7" href="/user/home?id=47514954">{{
                item.beReplied[0].user.nickname
              }}</a
              >：{{ item.beReplied[0].content }}
            </div>
            <div class="rp flex">
              <div class="time s-fc4">{{ item.time | getComDate }}</div>
              <div>
                <span class="dlt">
                  <span style="display: none" class="j-delete-comment">
                    <a
                      href="javascript:void(0)"
                      class="s-fc3"
                      data-id="15585584"
                      data-type="delete"
                      >删除</a
                    >
                    <span class="sep">|</span>
                  </span></span
                >
                <a class="likeNum" data-type="like" href="javascript:void(0)">
                  <i class="zan u-icn2 u-icn2-12"></i>
                  <span v-if="item.likedCount != 0">
                    ({{ item.likedCount }})
                  </span>
                </a>
                <span class="sep">|</span>
                <a
                  href="javascript:void(0)"
                  class="s-fc3"
                  data-id="15585584"
                  data-type="reply"
                  >回复</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vip1 from "../../assets/images/vip1.png";
import vip2 from "../../assets/images/vip2.png";
import vip3 from "../../assets/images/vip3.png";
import vip4 from "../../assets/images/vip4.png";
import vip5 from "../../assets/images/vip5.png";
import vip6 from "../../assets/images/vip6.png";
export default {
  props: ["data","title",'commentCount'],
  data() {
    return {
      vipImg: [vip1, vip2, vip3, vip4, vip5, vip6],
    };
  },
  filters: {
    // 评论日期
    getComDate(time) {
      // 如果是当前年就不显示年份
      let st = new Date(time);
      let newTimeObj = new Date();
      let newTime = newTimeObj.getFullYear();
      let year = st.getFullYear();
      let month = st.getMonth() + 1;
      let day = st.getDate();
      let m = st.getMinutes();
      let h = st.getHours();
      function format(val) {
        return val < 10 ? "0" + val : val;
      }
      month = format(month);
      day = format(day);
      m = format(m);
      h = format(h);
      if (year == newTime) {
        return `${month}月${day}日 ${h}:${m}`;
      } else {
        return `${year}年${month}月${day}日`;
      }
      // 如果不是当前年就显示年份
    },
  },
};
</script>
 
<style lang="less" scoped>
.comments_wrap {
  margin-top: 40px;
}

.good_comments_wrap {
  width: 100%;
  padding-bottom: 20px;
}

.good_comments_wrap,
.new_comments_wrap {
  font-size: 12px;
}

.good_comments_wrap h3,
.new_comments_wrap h3 {
  position: relative;
  top: 1px;
  height: 20px;
  border-bottom: 1px solid #cfcfcf;
  font-size: 12px;
  font-weight: 700;
  margin: 0;
}

.itm {
  padding: 15px 0;
  border-top: 1px dotted #ccc;
}

.head,
.head img {
  width: 50px;
  height: 50px;
  margin-right: -50px;
  vertical-align: middle;
}

.cntwrap {
  width: 100%;
  margin-left: 60px;
}

.cntwrap .cnt {
  width: 100%;
  overflow: hidden;
  line-height: 20px;
  word-break: break-word;
}

div.rp {
  justify-content: space-between;
  margin-top: 15px;
  text-align: right;
}

.time {
  margin: 0 !important;
  color: #999;
}

.u-icn2 {
  background: url(../../assets/images/icon2.png);
  display: inline-block;
  overflow: hidden;
  margin-right: 5px;
  vertical-align: -2px;
  margin-top: -4px;
  width: 15px;
  height: 14px;
  background-position: -150px 0;
}

.sep {
  margin: 0 8px;
  color: #ccc;
}

.likeNum {
  color: #333;
}

.s-fc3 {
  color: #333;
}

.s-fc7 {
  color: #0c73c2;
  margin-right: 5px;
}

.cnt .vip_img {
  margin-right: 5px;
  vertical-align: -1px;
  height: 12px;
}

.que {
  position: relative;
  padding: 8px 19px;
  margin-top: 10px;
  line-height: 20px;
  background: #f4f4f4;
  border: 1px solid #dedede;
}

.que .darr {
  display: inline-block;
  position: absolute;
  top: -7px;
  left: 20px;
  font-size: 12px;
  line-height: 14px;
  color: #f4f4f4;
}

.que .darr i {
  font-style: normal;
  text-align: left;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.que .darr .bd {
  color: #dedede;
}

.f-brk {
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

p.s-fc4 {
  color: #999;
  font-size: 12px;
  text-align: center;
}

</style>